<template>
  <div>
    <!--<div style="border-bottom: 1px solid #cccccc; width:98%;height: 40px;margin-left: 1%;margin-right: 1%;margin-bottom: 10px;">-->
    <!--<div class="divList jiaodian" @click="tabClick(0)">订单列表</div>-->
    <!--<div class="divList" @click="tabClick(1)">未审核订单</div>-->
    <!--<div class="divList" @click="tabClick(2)">待收货订单</div>-->
    <!--</div>-->
    <el-tabs class="orderstate" type="border-card" v-model="tagType" @tab-click="tabChange">
      <el-tab-pane v-for="i in tagList" :label="i.name">
        <div class="table-search" style="width: 100%;padding-left: 20px !important;" >

          <el-row :gutter="24">
            <el-col :span="9">
              <el-input size="medium" v-model="input"  @keyup.enter.native="keyDown($event)" placeholder="请输入单号" style="width:100%">
                <template slot="prepend">
                  <el-button>单号</el-button>
                </template>
              </el-input>
            </el-col>
            <el-col :span="9">
              <div class="el-input el-input-group el-input-group--prepend">
                <div class="el-input-group__prepend">供应商</div>
                <el-select size="medium" v-model="supplier" filterable placeholder="请选择供应商" style="width:100%;">
                  <el-option
                    v-for="item in suppliers"
                    :key="item.id"
                    :label="item.name"
                    :disabled="item.state && item.state.key!='NORMAL'"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>

          </el-row>
          <el-row :gutter="24" style="margin-top: 15px;">
            <el-col :span="9" >
              <div class="el-input el-input-group el-input-group--prepend">
                <div class="el-input-group__prepend">订单起始日期</div>
                <el-date-picker size="medium"
                  v-model="createAt"
                  type="date"
                  @change="getEntryTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择订单起始日期"
                  style="width:100%;"
                >
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="9"   >
              <div class="el-input el-input-group el-input-group--prepend">
                <div size="medium" class="el-input-group__prepend">订单截止日期</div>
                <el-date-picker
                  v-model="createAt1"
                  type="date"
                  style="width: 100%" size="medium"
                  @change="getEntryTime1"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择订单终止日期" >
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="6"  style="padding-right: 0px;padding-left: 0px;">
              <el-button size="medium" class="btn-info"  icon="el-icon-search" @click="search(1)">搜索</el-button>
              <el-button size="medium" class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="clearSearch">重置</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="table-padding"  style="padding:0 20px !important;">
          <!--订单列表 start-->
          <div v-if="i.name=='订单列表'">
            <div class="title-buttons">
              <router-link v-hasPermission="'management_purchaseOrder:edit'" to="/hqPurchaseOrders/add">
                <el-button size="medium" class="title-button btn-primary"  icon="el-icon-plus">新建&nbsp;</el-button>
              </router-link>
            </div>
            <el-table
              v-loading="loading"
              :data="tableData"
              :border="true"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>

              <el-table-column
                label="单号" >
                <template  slot-scope="scope">
                  <span>{{scope.row.no}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="供应商">
                <template  slot-scope="scope">
                  <span v-if="scope.row.supplierName">{{scope.row.supplierName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品信息库">
                <template  slot-scope="scope">
                  <span>{{scope.row.storeName}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购金额" >
                <template  slot-scope="scope">
                  <span>{{scope.row.amount | money}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购人">
                <template  slot-scope="scope">
                  <span v-if="scope.row.purchaser">{{scope.row.purchaser}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>

              <el-table-column
                label="审核人">
                <template  slot-scope="scope">
                  <span v-if="scope.row.checkerName">{{scope.row.checkerName}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="状态">
                <template  slot-scope="scope">
                  <span v-if="scope.row.state">{{scope.row.state.text}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="采购日期">
                <template  slot-scope="scope">
                  <span>{{moment(scope.row.purchaseTime).format("YYYY-MM-DD")}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="审核日期">
                <template  slot-scope="scope">
                  <span v-if="scope.row.checkTime">{{scope.row.checkTime}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="收货日期">
                <template  slot-scope="scope">
                  <span v-if="scope.row.acceptTime">{{scope.row.acceptTime}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作时间" width="150">
                <template  slot-scope="scope">
                  <span>{{scope.row.createAt}}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180">
                <template  slot-scope="scope">
                  <router-link :to="'/hqPurchaseOrders/show?type=5&id='+scope.row.id" class="">
                    <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                  </router-link>
                  <router-link  v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?type=4&id='+scope.row.id" v-if="scope.row.state.key=='INSTORAGE'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 再次订购</el-button>
                  </router-link>
                  <router-link  v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/update?id='+scope.row.id" v-if="scope.row.state.key=='AUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 确认收货</el-button>
                  </router-link>
                  <router-link  v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
                  </router-link>
                  <el-button  v-hasPermission="'management_purchaseOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'"
                              size="small"
                              style="margin: 0px;"
                              @click="handleDelete(scope.$index,scope.row)"> | 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br>
            <div class="block">
              <el-row>
                <el-col :span="24" class="text-right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeSet"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--订单列表 END-->


          <!--未提交 END-->

          <!--待审核 start-->
          <div v-if="i.name=='待审核'">
            <div class="title-buttons">
              <router-link to="/hqPurchaseOrders/add">
                <el-button  class="title-button btn-primary" size="medium"  icon="el-icon-plus">新建&nbsp;</el-button>
              </router-link>
            </div>
            <el-table
              v-loading="loading"
              :data="tableData"
              :border="true"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>

              <el-table-column
                label="单号" >
                <template  slot-scope="scope">
                  <span>{{scope.row.no}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="供应商">
                <template  slot-scope="scope">
                  <span v-if="scope.row.supplierName">{{scope.row.supplierName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品信息库">
                <template  slot-scope="scope">
                  <span>{{scope.row.storeName}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购日期" >
                <template  slot-scope="scope">
                  <span>{{moment(scope.row.purchaseTime).format("YYYY-MM-DD")}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购金额">
                <template  slot-scope="scope">
                  <span>{{scope.row.amount | money}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="采购人">
                <template  slot-scope="scope">
                  <span v-if="scope.row.purchaser">{{scope.row.purchaser}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="状态">
                <template  slot-scope="scope">
                  <span v-if="scope.row.state">{{scope.row.state.text}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="操作时间">
                <template  slot-scope="scope">
                  <span>{{scope.row.createAt}}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="210">
                <template  slot-scope="scope">
                  <router-link :to="'/hqPurchaseOrders/show?type=5&id='+scope.row.id" class="">
                    <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?type=4&id='+scope.row.id" v-if="scope.row.state.key=='INSTORAGE'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 再次订购</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/update?id='+scope.row.id" v-if="scope.row.state.key=='AUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 确认收货</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
                  </router-link>
                  <el-button v-hasPermission="'management_purchaseOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'" type="text"
                              size="small"
                              style="margin: 0px;"
                              @click="handleDelete(scope.$index, scope.row)"> | 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br>
            <div class="block">
              <el-row>
                <el-col :span="24" class="text-right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeSet"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--待审核 END-->

          <!--待收货 start-->
          <div v-if="i.name=='待收货'">
            <div class="title-buttons">
              <router-link to="/hqPurchaseOrders/add">
                <el-button  class="title-button btn-primary"  size="medium" icon="el-icon-plus">新建&nbsp;</el-button>
              </router-link>
            </div>
            <el-table
              v-loading="loading"
              :data="tableData"
              :border="true"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>

              <el-table-column
                label="单号" >
                <template  slot-scope="scope">
                  <span>{{scope.row.no}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="供应商">
                <template  slot-scope="scope">
                  <span >{{scope.row.supplierName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品信息库">
                <template  slot-scope="scope">
                  <span>{{scope.row.storeName}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购日期" >
                <template  slot-scope="scope">
                  <span>{{moment(scope.row.purchaseTime).format("YYYY-MM-DD")}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="审核日期">
                <template  slot-scope="scope">
                  <span v-if="scope.row.checkTime">{{scope.row.checkTime}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="审核人">
                <template  slot-scope="scope">
                  <span v-if="scope.row.checkerName">{{scope.row.checkerName}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="采购金额">
                <template  slot-scope="scope">
                  <span>{{scope.row.amount | money}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="创建时间">
                <template  slot-scope="scope">
                  <span>{{scope.row.createAt}}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="210">
                <template  slot-scope="scope">
                  <router-link :to="'/hqPurchaseOrders/show?type=5&id='+scope.row.id" class="">
                    <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?type=4&id='+scope.row.id" v-if="scope.row.state.key=='INSTORAGE'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 再次订购</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/update?id='+scope.row.id" v-if="scope.row.state.key=='AUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 确认收货</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
                  </router-link>
                  <el-button v-hasPermission="'management_purchaseOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'" type="text"
                              size="small"
                              style="margin: 0px;"
                              @click="handleDelete(scope.$index, scope.row)"> | 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br>
            <div class="block">
              <el-row>
                <el-col :span="24" class="text-right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeSet"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--待收货 END-->

          <!--已完成 start-->
          <div v-if="i.name=='已完成'">
            <div class="title-buttons">
              <router-link to="/hqPurchaseOrders/add">
                <el-button  class="title-button btn-primary" size="medium"  icon="el-icon-plus">新建&nbsp;</el-button>
              </router-link>
            </div>
            <el-table
              v-loading="loading"
              :data="tableData"
              :border="true"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>

              <el-table-column
                label="单号" >
                <template  slot-scope="scope">
                  <span>{{scope.row.no}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="供应商">
                <template  slot-scope="scope">
                  <span>{{scope.row.supplierName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品信息库">
                <template  slot-scope="scope">
                  <span>{{scope.row.storeName}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="采购日期" >
                <template  slot-scope="scope">
                  <span>{{moment(scope.row.purchaseTime).format("YYYY-MM-DD")}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="审核日期">
                <template  slot-scope="scope">
                  <span v-if="scope.row.checkTime">{{scope.row.checkTime}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="收货日期">
                <template  slot-scope="scope">
                  <span v-if="scope.row.acceptTime">{{scope.row.acceptTime}}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
              <el-table-column
                label="采购金额">
                <template  slot-scope="scope">
                  <span>{{scope.row.amount | money}}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="创建时间" width="190">
                <template  slot-scope="scope">
                  <span>{{scope.row.createAt}}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180">
                <template  slot-scope="scope">
                  <router-link :to="'/hqPurchaseOrders/show?type=5&id='+scope.row.id" class="">
                    <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?type=4&id='+scope.row.id" v-if="scope.row.state.key=='INSTORAGE'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 再次订购</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/update?id='+scope.row.id" v-if="scope.row.state.key=='AUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 确认收货</el-button>
                  </router-link>
                  <router-link v-hasPermission="'management_purchaseOrder:edit'" :to="'/hqPurchaseOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="">
                    <el-button type="text" size="small" style="margin: 0px;"  @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
                  </router-link>
                  <el-button v-hasPermission="'management_purchaseOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'" type="text"
                              size="small"
                              style="margin: 0px;"
                              @click="handleDelete(scope.$index, scope.row)"> | 删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br>
            <div class="block">
              <el-row>
                <el-col :span="24" class="text-right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeSet"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--已完成 END-->

        </div>
      </el-tab-pane>
    </el-tabs>

    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        tableData: [],
        loading:false,
        pageSizeSet:window.pageSizes,
        pageSize:window.pageSize,
        currentPage:1,
        input:"",
        total:0,
        tableIndex:0,
        supplier:"",
        warehouse:"",
        suppliers:[],
        warehouses:[],
        createAt:"",
        createAt1:"",
        tagType:"",
        tagList:[{name:'订单列表'},{name:'待审核'},{name:'待收货'},{name:'已完成'}],

        dialogIsShow:false,
        curDataRow:null,
        curDataIndex:0
      }
    },
    created(){
      window.this = this;
     this.initData();
    },
    components: {

    },
    methods: {
      initData(){
        console.log("*********");
        this.loading=true;
        this.$axios.get("stores/purchaseOrders?page.pn=1&page.size="+this.pageSize).then((data)=>{
          this.loading=false
          if(data.status==200){
            var value=data.content;
            this.tableData=value.purchaseOrderPage.content;
            this.total=value.purchaseOrderPage.totalElements;
            this.suppliers=value.suppliers;
            // this.warehouses=data.warehouse;

          }else{
            this.loading=false
          }
        })
      },

      getEntryTime(val){
        // this.createAt=val;
      },
      getEntryTime1(val){
        // this.createAt1=val;
      },
      tabChange(index,active){
        this.supplier="";
        this.warehouse="";
        this.createAt="";
        this.createAt1 = "";
        this.input = "";
        this.tableIndex = index.index;
        this.search();
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.search();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.search(1);
        }
      },
      clearSearch(){
        this.currentPage=1;
        this.supplier="";
        this.input="";
        this.createAt="";
        this.createAt1="";
        this.search(1);
      },
      search(content){
        var search="";
        if(this.tableIndex==1){
          search="search.state_eq=NOAUDIT&";
        }else if(this.tableIndex==2){
          search="search.state_eq=AUDIT&";
        }else if(this.tableIndex==3){
          search="search.state_eq=  INSTORAGE&";
        }
        if(content==1){
          search="search.no_like="+this.input+"&"+search;
        }
        if(this.supplier!=""){
          search="search.supplierId_eq="+this.supplier+"&"+search;
        }
        if(this.createAt!=""){
          console.log(this.createAt);
          search="search.createAt_gte="+this.createAt+" 00:00:00&"+search;
        }
        if(this.createAt1!=""){
          search="search.createAt_lte="+this.createAt1+" 23:59:59&"+search;
        }

        this.$axios.get("stores/purchaseOrders?"+search+"page.size="+this.pageSize).then((data)=>{
          if(data.status==200){
            var value=data.content;
            this.tableData=value.purchaseOrderPage.content;
            this.total=value.purchaseOrderPage.totalElements;
            this.loading=false
          }else{
            this.loading=false
          }
        })
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.$axios.get("stores/purchaseOrders?page.pn="+currentPage+"&page.size="+this.pageSize).then((data)=>{
          if(data.body.status==200){
            var value=data.content;
            this.tableData=value.purchaseOrderPage.content;
            this.total=value.purchaseOrderPage.totalElements;
            this.loading=false
          }else{
            this.loading=false
          }
        })
      },
      goBack() {
        this.router.go(-1);
      },
      handleEdit(index, row) {
        //console.log(index, row);
      },
      /*用户选择提示框后处理*/
      dialogResult(param){
        this.dialogIsShow=param.close;
        if(param.choose==="ok"){
          //console.log("确定");
          this.$axios.delete("stores/purchaseOrders/"+this.curDataRow.id).then((data)=>{
            if(data.status==200){
              this.tableData.splice(this.curDataIndex,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }else{
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        }else if(param.choose==="cancel"){
          //console.log("取消");
        }else{
          //console.log("不做处理");
        }
      },
      handleDelete(index, row) {
        this.curDataIndex = index;
        this.curDataRow = row;
        this.dialogIsShow = true;
        return false;
      },
    }
  }
</script>
<style scoped>
  .divList{
    width: 120px;height: 39px;float:left;line-height: 39px;text-align: center;color: #7f7f7f;
  }

  .divList:hover{
    color:#000000;
  }
  .jiaodian{
    border-top: 1px solid #cccccc;border-top-left-radius: 6px;border-top-right-radius: 6px;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #FFFFFF;color:#20a0ff;
  }
</style>
